[Day4] 資料與畫面綁定的方法

第 12 屆 iThome 鐵人賽

DAY 4

Modern Web

少年學Vue，如隙中窺月系列第 4 篇

12th鐵人賽 vue.js

Leo

2020-09-18 15:16:44

2017 瀏覽

分享至

介紹三種資料和畫面綁定常用的方式

v-text

可以直接將資料顯示在綁定的 html 標籤內，與 {{}} 最大的差異在於 v-text 會取代原本標籤內的內容，而 {{}} 則是不會。像是 message 變數用 v-text 放入 p 段落，則 p 段落原本的內容就被取代。

v-html

功能和 v-text 一樣，將資料直接顯示在綁定的 html 標籤內，也會取代標籤內原本的內容，與 v-text 差異在於如果綁定的資料有包含 html 標籤， v-html 會渲染所包含的標籤在網頁上，而不單純只是純文字。像是 message變數因為有包含 a 標籤，所以畫面就會渲染出連結的樣式，用法就像是 js 的innerHTML。最後官網有提醒我們，不要任意讓用戶輸入的資料用 v-html 方式呈現，因為這樣可能會產生 XSS 攻擊，不法人士可以在輸入欄位中插入惡意程式碼，並且透過網頁渲染執行，造成網頁資安風險。

<body>
    <div class="app">
       <p>不會{{message}}取代</p>
        <p v-text="message" >被取代</p>
        <p v-html="message" >被取代</p>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            message: '<a href="#">Hello Vue</a>',
        }
    });
</script>

v-model

常用在輸入欄位或表單值的綁定，像是上面的 input 輸入欄位就綁定資料 message，當 input 值改變則 message 值也會跟著改變，而 message 在畫面顯示的值也會跟著更動。

<body>
    <div class="app">
        輸入：<input type="text" v-model="message">
        {{message}}
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            message: '',
        }
    });
</script>